import React, { Component } from 'react';
import { NavLink} from 'react-router-dom';
import axios from 'axios';
import Token1 from './token1.jsx';
import Token2 from './token2.jsx';
class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            current:1,
            newData:[]
        }
    }
    async getApi(url,cfg,headers){
        let	data = await axios.get(url,{params:cfg},
        {
            headers: headers
        })
        return data;
    }
    getHome(id){
        const cfg = {
            page_number:id,
            page_size:'10'
        };
        this.getApi('/home/mediareports',cfg,{}).then((res)=>{
            this.setState({
                newData:res.data.data
            })
        })
    }
    componentDidMount(){
        this.getHome(1);
    }
    tabFn(e,index){
        this.setState({
            current:index
        })
        this.getHome(index);
    }
    /**
        如果有token 为token1 组件
        token2
    **/
    bToken(token){
        console.log(token)
        if(token){
            return <Token1 token={token}/>
        }else {
            return <Token2/>
        }
    }
    render(){
        // console.log()
        const list = this.state.newData.map((val)=>(
            <li key={val.id} >
                <a href={val.jump_url}>{val.main_title}</a>
                <span>{val.source}</span>
                <span>{val.sourceDate}</span>
            </li>
        ))

        return(
            <React.Fragment>
                <NavLink to="/">首页</NavLink><br/>
                <NavLink to="/input">表单</NavLink><br/>
                <NavLink to="/event">事件</NavLink><br/>
                <NavLink to="/tab">tab</NavLink>
                <div>这是动态可变参{this.bToken(this.props.match.params.token)}</div>
                <div className="tab_box">
                    <ol>
                        <li onClick={(e)=>this.tabFn(e,1)}
                        className={this.state.current===1 ? 'cur' :''}>新闻1</li>
                        <li onClick={(e)=>this.tabFn(e,2)}
                        className={this.state.current===2 ? 'cur' :''}>新闻2</li>
                        <li onClick={(e)=>this.tabFn(e,3)}
                        className={this.state.current===3 ? 'cur' :''}>新闻3</li>
                    </ol>
                    <div className="tab_box_con">
                        <div className={this.state.current===1 ? 'tab_con_list current' :'tab_con_list'}>这是div1</div>
                        <div className={this.state.current===2 ? 'tab_con_list current' :'tab_con_list'}>这是div2</div>
                        <div className={this.state.current===3 ? 'tab_con_list current' :'tab_con_list'}>这是div3</div>
                    </div>
                    <div className="tab_box_con">
                        <ul>
                            {list}
                        </ul>
                    </div>
                </div>
            </React.Fragment>
        )
    }
}
export default View;
